<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :width="width"
    custom-class="all-dialog h-dialog"
    :append-to-body="dialogBody"
    :close-on-click-modal="clickModal"
    @close="onClose"
    v-bind="$attrs"
  >
    <slot />
    <slot name="footer" />
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "h-dialog",
  inheritAttrs: false,
  emits: ["visible", "close"],
  props: {
    visible: Boolean,
    title: String,
    width: {
      type: String,
      default: "550px",
    },
    // 是否隐藏头部的线
    noline: {
      type: Boolean,
      default: false,
    },
    // Dialog 自身是否插入body
    dialogBody: {
      type: Boolean,
      default: false,
    },
    // 点击model是否关闭
    clickModal: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const onClose = () => {
      context.emit("update:visible", false);
      context.emit("close");
    };
    return {
      onClose,
    };
  },
});
</script>

<style lang="scss">
.all-dialog {
  @include flex;
  justify-content: initial;
  .el-dialog__header {
    width: 100%;
    border-bottom: 1px solid $border;
    padding: 15px 20px 15px;
    .el-dialog__headerbtn {
      top: 0;
      right: 0;
      .el-dialog__close {
        padding: 15px;
        font-size: 22px;
      }
    }
  }
  .el-dialog__body {
    padding: 30px 20px 15px 20px;
    width: 100%;
  }
}
.noline {
  ::v-deep(.el-dialog__header) {
    border-bottom: none;
  }
}
</style>
